@import "../common/var.scss";

.app {
  background: $color-main;
  position: relative;
  padding: 8rem 0;
  box-sizing: border-box;
}

.login {
  width: 87.625rem;
  height: 44.688rem;
  background: url(/imgs/login-bg.png) center no-repeat;
  background-size: contain;
  position: relative;
  z-index: 2;

  .logo {
    position: absolute;
    top: 2rem;
    left: 13rem;
    height: 5rem;
  }

  .content {
    height: 100%;
    width: 66%;
    margin: 0 auto;
  }

  .illus {
    img {
      width: 24.563rem;
    }
  }

  .auth {
    width: 25.188rem;
    h1 {
      font-size: 2.25rem;
    }
    .security {
      padding: 4.313rem 0 4.75rem;
      img {
        width: 10.25rem;
      }
    }
    #loading {
      &.hide {
        display: none;
      }
    }
    .loading {
      font-size: 3rem;
    }
    .items {
      visibility: visible;
      transform: translateY(0);
      transition: all 0.3s ease-out;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 1.125rem;
      &.hide {
        visibility: hidden;
        height: 0;
        transform: translateY(10px);
        overflow: hidden;
      }
    }
    .item {
      display: none;
      height: 3.875rem;
      background-color: #f2f2f2;
      border-radius: 0.5rem;
      padding: 1rem 0.5rem;
      box-sizing: border-box;
      border: solid 0.063rem #f2f2f2;
      cursor: pointer;
      justify-content: center;
      gap: 2rem;
      transition: var(--transition);
      &:hover {
        border-color: $color-main;
      }
      img {
        height: 2rem;
        &.small {
          height: 1.75rem;
        }
      }
      span {
        font-size: 1.2rem;
      }
      &.active {
        display: flex;
      }
      &.keplr, &.webAuthn {
        grid-column: 1 / 5;
      }
      &.webAuthn {
        position: relative;
        padding-right: 7rem;
        overflow: hidden;
        .create {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          border-left: #fff 2px solid;
          padding: 0 2rem;
          transition: var(--transition);
          &:hover {
            background-color: $color-bg;
          }
        }
      }
    }
  }

  &-bg-c {
    &-t {
      position: absolute;
      top: 0;
      right: 0;
      width: 70.875rem;
    }
    &-b {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 111.25rem;
    }
  }
}

.keplr {
  &.uninstall {
    &:hover {
      .label {
        display: none;
      }
      .label-uninstall {
        display: inline;
      }
    }
  }
  .label-uninstall {
    display: none;
  }
}

.prompt {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  input {
    box-sizing: border-box;
    padding: 1.4rem 2rem !important;
    width: 500px;
    background-color: #fff !important;
  }
}

.mail {
  .btns {
    width: 500px;
  }
  .btn {
    width: 45%;
  }
}
